<template>
    <div class="box" >
        <div class="boxtitle">
            <img src="img/tx/back.png" alt=""  @click="back()">
            <p> {{title}}</p>
        </div>
        <div>
            <img :src="arr.image" alt="" class="mainpic">
            <p>{{arr.title}}</p>
            <p>{{arr.tip}}</p>
        </div>
        <div v-for="(v,i) in arr.step" :key="i" class="step">
            <img :src="v.image" alt="">
            <p>{{v.text}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            clientId:0,
            title:'',
            pageIndex:0,
            pageSize:20,
            arr:[]
        }
    },
    activated(){
        this.getParams();
        this.getallinfo()
    },
    
    methods:{
         back(){
            this.$router.go(-1);//返回上一层
        },
        getParams:function(){
            // 取到路由带过来的参数
            var routerParams= this.$route.query;
            // 将数据放在当前组件的数据内
            this.clientId = routerParams.clientId.recipe.clientId;
            this.title=routerParams.clientId.recipe.title;
            window.console.log(this.clientId)
        },
        getallinfo:function(){
           this.axios({
            url:"https://api.hongbeibang.com/client/getRecipe?_t=1582704465587&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
            method:"get",
            params: {
                pageIndex:this.pageIndex,
                pageSize:this.pageSize,
                clientId:this.clientId
            }
        }).then((ok)=>{
            this.arr=ok.data.data.cookClient.recipe.data[0]
            //window.console.log(this.arr)
        })
        },

        
    }
}

 
</script>
<style scoped>
    .box{width: 90%;margin: .2rem auto}
    .boxtitle{display: flex;align-items: center;padding: .1rem}
    .boxtitle p{width: 100%; text-align: center;font-size: .2rem;font-weight: bold}
    .mainpic{width: 100%}
    .step img{width: 100%}
</style>